<template>
  <el-card class="subjectList">
    <div class="subjectTitle">
      <h1>学科名称</h1>
      <el-input  v-model.trim="pagedata.subjectName" size="small"></el-input>
      <el-button size="small" @click="clearSubjectName">清除</el-button>
      <el-button size="small" type="primary" @click="SubjectFilterLists"
        >搜索</el-button
      >
      <!-- 新增学科按钮 -->
      <el-button
        size="small"
        class="addSubjectBtn"
        type="success"
        icon="el-icon-edit"
        @click="dialogFormVisible = true"
        >新增学科</el-button
      >
      <!-- 新增学科弹层 -->
      <el-dialog
        :destroy-on-close="true"
        @close="closeDialog"
        class="addDialog"
        title="新增学科"
        :visible.sync="dialogFormVisible"
        width="400px"
      >
        <el-form :model="rules">
          <el-form-item label="学科名称" prop="AddsubjectName">
            <el-input
              width="100%"
              v-model.trim="AddsubjectName"
              size="small"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <el-switch
            v-model="value1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            inactive-text="是否显示"
          >
          </el-switch>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSubjectsList">确 定</el-button>
        </div>
      </el-dialog>
      <!-- end -->
      <!-- 修改弹层 -->
      <!-- 修改数据弹窗 -->
      <el-dialog
        class="addDialog"
        title="修改学科"
        :visible.sync="dialogupdateSubject"
        width="400px"
      >
        <el-form>
          <el-form-item label="学科名称">
            <el-input
              width="100%"
              v-model.trim="updatasubjectName"
              size="small"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-switch
            v-model="isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            inactive-text="是否显示"
          >
          </el-switch>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogupdateSubject = false">取 消</el-button>
          <el-button type="primary" @click="updateSubjectsList"
            >确 定</el-button
          >
        </div>
      </el-dialog>
       <!-- end -->
      <!-- 数据记录 -->
      <el-alert
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
       <!-- end -->
    </div>
    <!-- 学科表格数据 -->
    <el-table
      :data="ListsData"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      fit
      highlight-current-row
      style="width: 100%"
      border
    >
      <el-table-column align="center" label="序号" type="index">
      </el-table-column>
      <el-table-column
        align="center"
        label="学科名称"
        property="subjectName"
      ></el-table-column>
      <el-table-column
        align="center"
        label="创建者"
        property="username"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        sortable=""
        align="center"
        width="200px"
      >
        <!-- 作用域插槽 -->
        <template v-slot="{ row }">{{
          row.addDate | parseTimeByString
        }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="前台是否显示"
        property="isFrontDisplay"
      >
        <template v-slot="{ row }">
          {{ row.isFrontDisplay === 1 ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="二级目录"
        property="twoLevelDirectory"
      ></el-table-column>
      <el-table-column
        align="center"
        label="标签"
        property="tags"
      ></el-table-column>
      <el-table-column
        align="center"
        label="题目数量"
        property="totals"
      ></el-table-column>
      <!-- 操作按钮 -->
      <el-table-column
        align="center"
        label="操作"
        width="280"
        class-name="small-padding fixed-width"
      >
        <template v-slot="{ row }">
          <el-button
            type="text"
            size="small"
            @click="
              $router.push(`directorys?id=${row.id}&name=${row.subjectName}`)
            "
            >学科分类</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="$router.push(`tags?id=${row.id}&name=${row.subjectName}`)"
            >学科标签</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="updateSubject(row.subjectName, row.id, row.isFrontDisplay)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="open(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- end -->

    <!-- 分页 -->
    <div class="pagination">
      <div class="pages">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(pagedata.page)"
          :total="Number(total)"
          :page-size="Number(pagedata.pagesize)"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
    <!-- end -->
  </el-card>
</template>

<script>
import { list, add, remove, update } from '@/api/hmmm/subjects.js'
export default {
  components: {},
  data () {
    return {
      // 表单验证规则
      rules: {
        AddsubjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      // 提示消息条数
      alertText: '',
      // 页面加载
      listLoading: false,
      // 条数
      total: null,
      currentPage4: 4,
      // 学科列表数据
      ListsData: [],
      // 分页数据
      pagedata: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 增加修改学科弹窗数据
      dialogFormVisible: false,
      dialogupdateSubject: false,
      AddsubjectName: '',
      updatasubjectName: '',
      // 是否显示开关
      value1: true,
      isFrontDisplay: true,
      // 修改的id
      updataId: ''
    }
  },
  created () {
    this.getSubjectsLists(this.pagedata)
  },
  mounted () {},
  computed: {},
  methods: {
    // 获取学科列表
    async getSubjectsLists (params) {
      try {
        const { data } = await list(params)
        this.ListsData = data.items
        this.total = data.counts
        this.alertText = `共 ${this.total} 条记录`
      } catch (error) {
        console.log(error)
      }
    },
    // 增加学科数据
    async addSubjectsList () {
      if (this.AddsubjectName) {
        this.isFrontDisplay = this.value1 === true ? 1 : 0
        try {
          await add({
            subjectName: this.AddsubjectName,
            isFrontDisplay: this.isFrontDisplay
          })
          this.$message.success('添加成功')
          this.AddsubjectName = ''
          this.getSubjectsLists()
          this.dialogFormVisible = false
        } catch (error) {
          this.$message.warning('请输入学科名称')
        }
      } else {
        this.$message.warning('请输入学科名称')
      }
    },
    // 删除弹窗
    open (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.removeSubject(id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭弹窗
    closeDialog () {
      this.AddsubjectName = ''
    },
    // 删除学科数据
    async removeSubject (id) {
      try {
        await remove({
          id
        })
        this.$message.success('删除数据成功')
        this.getSubjectsLists()
      } catch (error) {}
    },
    // 修改学科数据弹窗
    updateSubject (updataName, id, isFrontDisplay) {
      this.updatasubjectName = updataName
      if (isFrontDisplay === 1) {
        this.isFrontDisplay = true
      } else {
        this.isFrontDisplay = false
      }
      this.dialogupdateSubject = true
      this.updataId = id
    },
    // 修改学科数据
    async updateSubjectsList () {
      if (this.updatasubjectName) {
        try {
          await update({
            id: this.updataId,
            subjectName: this.updatasubjectName,
            isFrontDisplay: this.isFrontDisplay
          })
          this.$message.success('修改学科成功')
          this.getSubjectsLists()
          this.dialogupdateSubject = false
        } catch (error) {}
      } else {
        this.$message.warning('请输入学科名称')
      }
    },
    // 搜索信息
    async SubjectFilterLists () {
      this.pagedata.page = 1
      this.getSubjectsLists(this.pagedata)
    },
    // 清除搜索数据,重新加载列表
    clearSubjectName () {
      this.pagedata.subjectName = ''
      this.getSubjectsLists(this.pagedata)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagedata.pagesize = val
      if (this.pagedata.page === 1) {
        this.getSubjectsLists(this.pagedata)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagedata.page = val
      this.getSubjectsLists(this.pagedata)
    }
  }
}
</script>

<style lang="less" scoped>
.subjectList {
  .subjectTitle {
    margin-bottom: 20px;
    h1 {
      float: left;
      font-size: 14px;
      margin-left: 12px;
      color: #606266;
    }
    align-items: center;
    .el-input {
      width: 200px;
      margin: 0 10px;
    }
    .addSubjectBtn {
      text-align: right;
      float: right;
    }
  }
  .alert {
    margin: 20px 10px;
  }
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
  .dialog-footer {
    text-align: right;
    padding: 10px 20px 20px;
  }
  .el-switch /deep/ span {
    color: #606266;
    font-weight: 700;
  }
}
</style>
